<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. H5规范提供了js分线程的实现，取名为: web workers
        2．相关API
            * worker :构造函数，加载分线程执行的js文件
            * worker.prototype.onmessage:用于接收另一个线程的回调函数
            *worker.prototype.postMessage:向另一个线程发送消息
        3．不足
            *worker内代码不能操作DOM(更新UI)
            *不能跨域划加载JS
            *不是每个浏览器都支持这个新特性
     -->

     <input type="text" placeholder="数值" id="number">
     <button id="btn">计算</button>
     <script>
        //  1 1 2 3 5 8    f(n) = f(n-1) + f(n-2)
        var input = document.getElementById('number')
        document.getElementById('btn').onclick = function(){
            var number = input.value

            // 创建一个Worker对象
            var worker = new Worker('worker.js')
            // 绑定接收消息的监听
            worker.onmessage = function(event){
               console.log('主线程接收分线程返回的数据' + event.data); 
               alert(event.data)
            }

            // 向分线程发送消息
            worker.postMessage(number)
            console.log('主线程向分线程发送数据' + number);
        }

     </script>
</body>
</html>